<template>
    <div id="Member">
        <x-header :left-options="{backText: ''}">我邀请的会员</x-header>
        <div class="member">           
            <div class="member_top">
                <h3>您在酒店的排名</h3> 
                <p>{{ DataList.ranking }}<span>  名</span></p>
            </div>
            <div class="member_bottom">
                <div class="member_bottom_top">我的{{DataList.total}}位会员贡献排名</div>
                <scroller use-pullup  :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
                lock-x  ref="scrollerBottom" v-show="flg">    
                    <ul>                        
                        <li v-for="(item,index) in userNumberList" :key="index">
                            <p class="active_index" v-if="index == 0"><img src="@/assets/1@2x.png" alt="" style="width:.5rem"></p>
                            <p class="active_index" v-if="index == 1"><img src="@/assets/2@2x.png" alt="" style="width:.5rem"></p>
                            <p class="active_index" v-if="index == 2"><img src="@/assets/3@2x.png" alt="" style="width:.5rem"></p>
                            <p class="active_index" v-if="index >2"><span style="width:.5rem;height:1.6rem;line-height:1.6rem;text-align: center">{{ index + 1 }}</span></p>
                            <div>
                                <p><img :src="item.img?item.img:require('@/assets/member_img.png')" alt=""></p>
                                <p class="nickname">
                                    <span style="font-size:.3rem;color:#000000;">{{ item.nickName }}</span>   
                                    <span style="font-size:.24rem;color:#666666;">{{ item.number }}位下级</span>   
                                </p>
                                <p class="right">￥{{ item.reward  }}</p>
                            </div>                       
                        </li>
                    </ul>
                </scroller>
                <ul v-show="!flg">
                  <li v-if="userNumberList.length == 0" style="text-align:center;height:0;padding:0;">
                      <img class="no_data" src="@/assets/no_data.png" alt="">
                  </li>
                </ul>
            </div>
        </div> 
        <x-button type="primary" @click.native="onItemClick">立即邀请</x-button>  
        <!-- 提示分享 -->
        <div v-transfer-dom>
          <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
            <div style="color:#fff;text-align:center;height:100%;" @click="showDialogStyle = false">
              <div class="content">
                  <p  class="tishi"><img src="@/assets/tishi.png" alt="" style="width:3rem"></p>
                  <p style="font-size:.48rem">请点击右上角分享</p>
              </div>
            </div>
          </x-dialog>
        </div>           
    </div>
</template>
<script>
import {
  XHeader,
  Scroller,
  XButton,
  XDialog,
  TransferDomDirective as TransferDom
} from "vux";
import { getInvitationList, getPersonalInfo } from "@/service/home.js";
import AxiosIns from "@/service/axiosConfig.js";
import axios from "axios";
import wx from "weixin-js-sdk";
import { setTimeout } from "timers";
var pullupDefaultConfig = {
  content: "上拉加载更多",
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  upContent: "上拉加载更多",
  downContent: "正在加载中。。。",
  loadingContent: "没有更多了"
};

export default {
  directives: {
    TransferDom
  },
  components: { XHeader, Scroller, XButton, XDialog },
  data() {
    return {
      userInfo: "",
      token: "",
      id: "",
      number: parseInt(localStorage.number),
      pageNum: 1,
      pageSize: 10,
      pageSize22: 10,
      DataList: "",
      userNumberList: [],
      pullupDefaultConfig: pullupDefaultConfig,
      total: "",
      totalNum: 0,
      list_length: "",
      text: "",
      showDialogStyle: false,
      name: "",
      flg: ""
    };
  },
  mounted() {
    this.token = this.$route.query.token;
    this._getInvitationList(this.pageNum);
    this._getPersonalInfo();
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({ top: 0 });
    });
  },
  methods: {
    //获取用户个人信息
    _getPersonalInfo() {
      getPersonalInfo().then(res => {
        var android = sessionStorage.getItem("android");
        this.userInfo = res.data.userInfo;
        this.name = this.userInfo.name;
        this.id = this.userInfo.id;
        this.wechat();
      });
    },
    _getInvitationList(pageNum) {
      var data = {
        number: this.number,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getInvitationList(data).then(res => {
        var android = sessionStorage.getItem("android");
        if (android) {
          console.log(android);
        }
        if (res.data.errCode == 10001) {
          android ? window.android.logout() : this.$router.push("/login");
          return false;
        }
        this.DataList = res.data;
        this.total = res.data.total;
        this.userNumberList = res.data.userNumberList;
        if (this.userNumberList.length == 0) {
          this.flg = false;
        } else {
          this.flg = true;
        }
        this.list_length = this.userNumberList.length;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      });
    },
    wechat() {
      var url = window.location.href;
      // if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
      //   var firstUrl = sessionStorage.getItem("FirstUrl");
      //   url = this.iPhone_url;
      // }
      axios.post("/recommend/getPriceAgreement?url=" + url).then(res => {
        let links = "http://staff.ihotelvip.com/my/QrCode?id=" + this.id; //分享出去的链接
        let title = "送你一个住酒店福利，限前1000位领取。"; //分享的标题
        let desc = `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`; //分享的详情介绍
        wx.config({
          debug: false,
          appId: "wx9a16008c72a9cf50",
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.qm,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo"
          ]
        });
        //直接调用
        wx.ready(function() {
          //分享给好友
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
              //logUtil.printLog("分享给朋友成功返回的信息为:",res);
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
              console.log("222222");
            }
          });
        });
        //失败回调
        wx.error(function(res) {
          // alert("失败");
        });
      });
    },
    onItemClick() {
      if (localStorage.getItem("flg")) {
        //调用安卓方法分享
        window.android.shareWX(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
      } else if (localStorage.getItem("iosToken_flg")) {
        //调用ios方法分享
        sharedAction(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
      } else {
        this.showDialogStyle = true;
      }
    },
    loadMore() {
      var pageSize22 = this.pageSize22;
      this.pageSize = this.pageSize + pageSize22;
      if (this.list_length < this.total) {
        this._getInvitationList();
        this.$refs.scrollerBottom.donePullup();
      }
    }
  }
};
</script>
<style scoped lang="less">
#Member {
  background: url(../../../assets/member_login.png) no-repeat;
  width: 100%;
  height: 700px;
  background-size: 100%;
  .member {
    width: 94%;
    margin: 0 auto;
    .member_top {
      color: #fcdd45;
      margin-top: 0.48rem;
      h3 {
        font-size: 0.3rem;
      }
      p {
        font-size: 0.72rem;
        span {
          font-size: 0.36rem;
        }
      }
    }
    .member_bottom {
      background: #fff;
      margin-top: 0.6rem;
      border-radius: 0.2rem 0.2rem 0 0;
      position: absolute;
      top: 3rem;
      bottom: 0;
      width: 94%;
      left: 0.25rem;
      div:nth-child(2) {
        //height: 6.8rem !important;
      }
      .member_bottom_top {
        color: #ffad00;
        border-bottom: 1px solid #ddd;
        padding-left: 0.25rem;
        height: 0.6rem;
        line-height: 0.6rem;
      }
      ul {
        li {
          width: 100%;
          height: 1.6rem;
          line-height: 1.6rem;
          padding: 0 0.3rem 0 0.25rem;
          div {
            height: 1.6rem !important;
          }
          p {
            float: left;
            margin-left: 0.2rem;
            img {
              width: 1rem;
              border-radius: 50%;
            }
            span {
              float: left;
              width: 3rem;
              height: 0.5rem;
              line-height: 1.2rem;
            }
          }
          .active_index {
            margin-left: 0;
          }
          .nickname {
            width: 2rem;
          }
          .right {
            color: red;
          }
        }
      }
    }
  }
  button.weui-btn {
    width: 90%;
    position: fixed;
    bottom: 0.3rem;
    left: 5%;
  }
}
.v-transfer-dom {
  .content {
    font-size: 0.3rem;
    p {
      margin-bottom: 0.25rem;
    }
    .tishi {
      width: 100%;
      overflow: hidden;
      img {
        float: right;
        margin-right: 0.5rem;
      }
    }
  }
}
</style>